window.onload = () => {
    //logo图片
    const logoImg = document.querySelector('.logo>img');
    //产品展示li元素
    const prod = document.querySelector('.prod');
    //产品列表盒子
    const hideMenu = document.querySelector('.hideMenu');
    const headerNav = document.querySelector('.header-nav');
    //返回顶部按钮
    const goTop = document.querySelector('.goTop');
    //头部标签
    const header = document.querySelector('header');

    animate();

    /**
     ** 获取头部标签的背景图片
     ** 如果有data-src属性
     ** 则将图片路径赋值给头部标签的背景图片
     */
    let attr = header.getAttribute('data-src');
    if (attr) {
        header.style.backgroundImage = `url(${attr})`;
    } else if (attr === null) {
        header.style.backgroundImage = `url(./assets/1539d45d087cd7c03483390ab379fa7f.jpg)`;
    }

    /**
     ** 监听屏幕滚动事件
     ** 当屏幕滚动一定的距离后
     ** 头部导航栏固定在窗口顶部
     ** 显示返回顶部按钮
     */
    window.addEventListener('scroll', function () {
        const scrollTop = window.scrollY;
        if (scrollTop > 66) {
            headerNav.classList.add('on');
            animate()
            // console.log(`Scroll distance: ${scrollTop}px`);
        } else {
            headerNav.classList.remove('on');
            goTop.classList.remove('on');
            animate()
        }
        if (scrollTop > 150) {
            goTop.classList.add('on');
        }
    });

    /**
     ** 产品列表的隐藏与显示
     ** 当鼠标移入产品展示时，显示产品列表
     ** 如果进入产品列表中，产品列表就持续展示
     ** 如果不进入产品列表中，0.15s后隐藏产品列表
     ** 防止从产品展示移入产品列表中时隐藏过快
     ** 用户无法访问产品列表，优化用户体验
     */
    let hideTimeout;

    function showMenu() {
        clearTimeout(hideTimeout); // 清除隐藏定时器
        hideMenu.style.display = 'block';
    }

    function hideMenuWithDelay() {
        hideTimeout = setTimeout(() => {
            hideMenu.style.display = 'none';
        }, 150);
    }

    prod.addEventListener('mouseenter', showMenu);
    prod.addEventListener('mouseleave', hideMenuWithDelay);
    hideMenu.addEventListener('mouseenter', showMenu);
    hideMenu.addEventListener('mouseleave', hideMenuWithDelay);

    /**
     ** 回到顶部点击事件
     */
    goTop.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            //平滑的回到顶部
            behavior: 'smooth',
        });
        animate()
    })

    let position = 0;     // 初始位置
    const amplitude = 3;    // 移动幅度
    const duration = 1000;  // 动画持续时间（毫秒）

    /**
     ** 动画函数
     ** 移动logo图片
     */
    function animate() {
        let startTime = null;

        /**
         ** 动画帧函数
         ** @param timestamp
         */
        function step(timestamp) {
            if (!startTime) startTime = timestamp;
            const progress = timestamp - startTime;

            if (progress < duration) {
                // 更新位置
                position = amplitude * Math.sin((progress / duration) * Math.PI);
                logoImg.style.transform = `translateY(${position}px)`;
                requestAnimationFrame(step);
            } else {
                // 动画结束时将元素位置重置到原始位置
                logoImg.style.transform = 'translateY(0)';
            }
        }

        requestAnimationFrame(step);
    }

    /**
     ** 头部导航菜单鼠标移动样式
     ** index的默认值是在当前页面
     ** 当鼠标移动到导航菜单的某一个页面时
     ** 改变index的值为该页面的索引
     ** 当移动到下一个导航菜单时
     ** 从当前index的导航菜单移动到鼠标移动的导航菜单的样式
     */
        // 记录选中索引
    let currentIndex;
    const indicator = document.querySelector('.header-nav-box .indicator');
    const navItems = document.querySelectorAll('.header-nav-box nav ul li');
    // 获取URL中的路径部分（不包括域名）
    let path = window.location.pathname.slice(1);
    // 获取URL路径中的最后一个片段  pop():移除数组的最后一个元素，并返回该元素
    let lastSegment = path.split('/').pop() || 'index.html';
    // URL路径到索引的映射
    const pathToIndex = {
        'index.html': 0,
        'companyProfile.html': 1,
        'customerCases.html': 2,
        'productshow.html': 3,
        'newsCenter.html': 4,
        '#': 5,
        'onlineMessage.html': 6,
        'contactUs.html': 7
    };

    // 根据URL路径获取索引
    currentIndex = pathToIndex[lastSegment] !== undefined ? pathToIndex[lastSegment] : 0;
    // 初始化指示器位置
    initLeft(currentIndex)

    // 监听鼠标移入事件
    navItems.forEach(item => {
        item.addEventListener('mouseenter', function () {
            //!先显示指示器再移动,才会有动画效果
            indicator.style.display = 'block';
            // 获取当前导航项的宽度
            const itemWidth = this.offsetWidth;
            // 获取当前导航项的偏移量
            const itemOffsetLeft = this.offsetLeft;
            // 设置指示器的宽度
            indicator.style.width = `${itemWidth}px`;
            // 设置指示器的位置
            indicator.style.left = `${itemOffsetLeft}px`;
        });
        item.addEventListener('mouseleave', function () {
            indicator.style.display = 'none';
        });
    });

    function initLeft(index) {
        // 获取元素相对于视口的位置
        let li = navItems[index];
        let rect = li.getBoundingClientRect();
        indicator.style.left = `${rect.left}px`;
        indicator.style.width = `${li.offsetWidth}px`;
    }
}